<template>
	<view class="floorLayout" :animation="animationBounceInUp">
		<view class="floorLeft border_box">
			<view class="border_inner">
				<view class="global-visualization-box-head">{{ lf_title }}
				</view>
				<view class="fleft_echart">
					<uni-echarts ref="echarts1fl" :option="optionFFLValue" canvasId="echarts1fl"></uni-echarts>
				</view>
			</view>
		</view>
		<view class="floorRight border_box">
			<view class="border_inner">
				<view class="global-visualization-box-head">{{ rg_title }}
				</view>
				<view class="floor-right-container" id="visualization-floor-div">
					<div id="floor-echarts-right" class="fright_echart"></div>
					<!-- <img :src="floorImage" class="fright_echart" />
					<div class="floor-right-layout">
						<div class="device_point" :id="'point_'+index" v-for="(item,index) in 12"></div>
					</div> -->
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import moment from "moment";
	import store from '@/store/index.js';
	import * as echarts from 'echarts';
	import $config from '@/common/config.js';
	import request from '@/common/request.js';
	const domId = 'floor-echarts-right';
	const CHNUMBER = ['零', '一', '二', '三'];
	const COLORS = ['rgba(118, 219, 251)', 'rgba(123, 253, 192)', 'rgba(255, 230, 101)', 'rgba(165, 108, 250)'];
	const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
	const CONSTALLS = {
		"公区照明": [{
				value: '0',
				code: 'E33_kWh_GQZM',
				name: '一层照明'
			},
			{
				value: '0',
				code: 'E34_kWh_GQZM',
				name: '二层照明'
			},
			{
				value: '0',
				code: 'E35_kWh_GQZM',
				name: '三层照明'
			}
		],
		"水吧插座": [{
				value: '0',
				code: 'E33_kWh_SBCZ',
				name: '一层水吧插座'
			},
			{
				value: '0',
				code: 'E34_kWh_SBCZ',
				name: '二层水吧插座'
			},
			{
				value: '0',
				code: 'E35_kWh_SBCZ',
				name: '三层水吧插座'
			}
		],
		"走廊插座": [{
				value: '0',
				code: 'E33_kWh_ZLCZ',
				name: '一层走廊插座'
			},
			{
				value: '0',
				code: 'E34_kWh_ZLCZ',
				name: '二层走廊插座'
			},
			{
				value: '0',
				code: 'E35_kWh_ZLCZ',
				name: '三层走廊插座'
			}
		],
		"卫生间": [{
				value: '0',
				code: 'E33_kWh_WSJ',
				name: '一层卫生间'
			},
			{
				value: '0',
				code: 'E34_kWh_WSJ',
				name: '二层卫生间'
			},
			{
				value: '0',
				code: 'E35_kWh_WSJ',
				name: '三层卫生间'
			}
		],
		"其他": [{
				value: '0',
				code: 'E33_kWh_SBJ',
				name: '一层其他'
			},
			{
				value: '0',
				code: 'E34_kWh_WZAWSJ',
				name: '二层其他'
			},
			{
				value: '0',
				code: 'E35_kWh_QSJ',
				name: '三层其他'
			}
		]
	}
	import {
		getGeoJsonOf,
		getSensorJsonOf,
		option
	} from "@/common/geoJson.data.tc";
	import UniEcharts from '@/components/echarts-uniapp/echarts-uniapp.vue';
	import {
		option1FLValue
	} from "@/common/floor_echart_data.js";
	export default {
		components: {
			UniEcharts
		},
		props: {
			floorIndex: {
				type: Number,
				default: 1
			},
		},
		data() {
			return {
				lf_title: '一层能耗数据(最近24小时)',
				rg_title: '一层平面图',
				optionFFLValue: {},
				screenFont: 12,
				echartInstance: {},
				animationBounceInUp: {},
				floorData: [
					[],
					[],
					[],
					[],
					[],
					[]
				],
				sensorState: false,
				changeSensorInterval: '',
				floorImage: $config.comstatic + '/images/floor1n.png'
			}
		},
		watch: {
			floorIndex(newValue, oldValue) {
				console.log(newValue, '---newFloor----')
				console.log(oldValue, '---oldFloor----')
				this.lf_title = CHNUMBER[newValue] + '层能耗数据(最近24小时)'
				this.rg_title = CHNUMBER[newValue] + '层平面图'
				if (store.state.hasLogin) {
					this.logMulti()
				}
				this.floorImage = $config.comstatic + '/images/floor' + newValue + 'n.png'
				setTimeout(() => {
					this.floorImage = $config.comstatic + '/images/floor' + newValue + 's.png'
				}, 8000);
				echarts.registerMap('tc', getGeoJsonOf(this.floorIndex));
				option.baseOption.geo.map = "tc";
				option.baseOption.series[0].data = getSensorJsonOf(this.floorIndex);
				this.echartInstance.setOption({
					...option
				});
			}
		},
		unmounted() {
			// clearInterval(this.changeSensorInterval);
		},
		mounted() {
			let that = this;
			let width = 480 //原图宽度
			let height = 180 //原图高度
			this.screenFont = store.state.screenWidth / 1920 * 16;
			this.optionFFLValue = option1FLValue;
			this.optionFFLValue.legend.itemHeight = this.screenFont * 2 / 3;
			this.optionFFLValue.legend.textStyle.fontSize = this.screenFont * 2 / 3;
			// let dom = document.getElementById("visualization-floor-div")
			// let realHeight = parseInt(dom.clientHeight) //实际高度
			// let realWidth = parseInt(dom.clientWidth)

			let offset = [
				[28, 6], //1排1横黄
				[112, 260], //2排4横黄
				[116, 336], //2排5横黄
				[116, 420], //2排6横黄
				[40, 102], //1排2斜的黄色
				[116, 192], //2排3斜的黄色
				[28, 258], //1排4横绿
				[116, 8], //2排1横绿
				[40, 192], //1排3斜的绿色
				[106, 100], //2排2斜的绿色
				[122, -60] //排风温度
				[122, -60] //排风温度
			]

			// for (let i = 0; i < offset.length; i++) {
			// 	let dom = document.getElementById("point_" + i)
			// 	let offsetTop = offset[i][0] //原图top
			// 	let offsetLeft = offset[i][1] //原图left
			// 	let left = offsetLeft * realWidth / width
			// 	let top = offsetTop * realHeight / height
			// 	if (dom) {
			// 		console.log('point_==>>>', dom)
			// 		dom.style.top = top + "px"
			// 		dom.style.left = left + "px"
			// 	}
			// }

			this.$nextTick(() => {
				let chartDom = document.getElementById(domId);
				this.echartInstance = echarts.init(chartDom);
				echarts.registerMap('tc', getGeoJsonOf(this.floorIndex));
				option.baseOption.geo.map = "tc";
				option.baseOption.series[0].data = getSensorJsonOf(this.floorIndex);
				this.echartInstance.setOption({
					...option
				});
			});
			// 隐藏动画节省开销
			// this.animation = uni.createAnimation({
			// 	duration: 2000,
			// 	timingFunction: "ease"
			// })
			// this.animation.top(320);
			// this.animation.translateY(-320).step({
			// 	duration: 1000
			// })
			// this.animationBounceInUp = this.animation.export()

			if (store.state.hasLogin) {
				this.logMulti()
			}

			//节省开销
			uni.$on('refProperties', (res) => {
				return
				let deviceId = res.deviceId;
				let data = getSensorJsonOf(that.floorIndex);
				for (let i = 0; i < data.length; i++) {
					if (data[i].platId.replaceAll("_", "").toLowerCase() == deviceId.toLowerCase()) {
						let isExist = false
						for (let j = 0; j < that.floorData[that.floorIndex].length; j++) {
							if (that.floorData[that.floorIndex][j].deviceId == deviceId) {
								isExist = true;
								that.floorData[that.floorIndex][j] = {
									lastTime: res.lastTime,
									deviceId: deviceId,
									name: "传感器",
									value: data[i].value,
									val: res.properties || ""
								}
								break;
							}
						}
						if (!isExist) {
							that.floorData[that.floorIndex].push({
								lastTime: res.lastTime,
								deviceId: deviceId,
								name: "传感器",
								value: data[i].value,
								val: res.properties || ""
							})
						}
						option.baseOption.series[1].data = that.floorData[that.floorIndex]
						console.log('watch.value==>>', JSON.stringify(option));
						that.echartInstance.setOption({
							...option
						});
						break;
					}
				}
			});

			// this.changeSensorInterval = setInterval(this.changeSensor, 8000);

			setTimeout(() => {
				this.floorImage = $config.comstatic + '/images/floor' + this.floorIndex + 's.png'
			}, 8000);

		},
		methods: {
			changeSensor() {
				if (this.sensorState) {
					this.floorImage = $config.comstatic + '/images/floor' + this.floorIndex + 'n.png'
				} else {
					this.floorImage = $config.comstatic + '/images/floor' + this.floorIndex + 's.png'
				}
				this.sensorState = !this.sensorState
			},
			logMulti() {
				let that = this;
				let deviceIds = ""
				for (let key in CONSTALLS) {
					deviceIds += CONSTALLS[key][this.floorIndex]?.code + ","
				}
				let postData = {
					timeType: 'hour', //最近一周
					startTime: moment().startOf('hour').add(-24, 'hour').format(DATE_TIME_FORMAT),
					endTime: moment().startOf('hour').format(DATE_TIME_FORMAT),
					projectId: $config.pcode,
					deviceId: deviceIds,
				};
				let headerdata = {
					"content-type": "application/json"
				};
				request.postRaw('/jeecgboot/device/data/logMulti', headerdata, postData).then(resData => {
					console.log('resData==>>', resData);
					if (resData.code == 200) {
						let resultData = resData.result;
						if (resultData) {
							let seriesData = []
							let cnumber = 0
							for (let key in CONSTALLS) {
								seriesData.push({
									name: key,
									type: 'bar',
									stack: '1',
									emphasis: {
										focus: 'series',
									},
									itemStyle: {
										normal: {
											color: COLORS[cnumber],
										},
										opacity: 0.2,
									},
									data: resultData[cnumber]?.data.map((item, index) => {
										if (item && item.power) {
											return Number(item.power.toFixed(2))
										}
										return 0
									}),
								})
								cnumber++
							}

							//x轴横坐标取值数据
							let xData = resultData[0].range.map((item) => {
								return item.substring(11) + '时';
							});

							that.optionFFLValue = {
								...that.optionFFLValue,
								series: seriesData,
								xAxis: [{
									...that.optionFFLValue.xAxis[0],
									data: xData
								}]
							};
						}
					}
				}).catch(errData => {
					console.log('errData==env>>', errData)
				});
			},
		},
	}
</script>
<style>
	@import 'index.css';
</style>
